<template>
  <el-dialog
    v-model="dialogVisible"
    :destroy-on-close="true"
    :align-center="true"
    width="40%"
    :title="`${dialogData.title}工友标注`"
  >
    <el-form
      ref="wgFormRef"
      :disabled="dialogData.isView"
      :model="dialogData.itemInfo"
      :rules="rules"
      label-width="120px"
      label-suffix=" :"
      :hide-required-asterisk="dialogData.isView"
    >
      <el-form-item label="选择标注">
        <el-select v-model="dialogData.itemInfo.markerType" class="m-2" placeholder="Select" size="large" style="width: 100%">
          <el-option v-for="item in workerMarkType" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="CirclePlus" @click="handleSetMarker">保存</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { getOptTitle, OptEnum } from "@/biz/eenum/appEnum";
import { DialogParam } from "@/biz/interface/DialogType";
import { WorkerMarkerEntity } from "@/biz/interface/WorkerType";
import { CirclePlus } from "@element-plus/icons-vue";
import { workerMarkType } from "@/biz/datas/workerData";
import { saveWorkerMarkerApi } from "@/api/modules/cpyswk/wk";

//页面的数据
interface JobDialogOption extends DialogParam {
  //弹出表单的标题
  title: string;
  //是否是查看状态，查看状态是不可以提交数据
  isView: boolean;
  //当前的数据对象
  itemInfo: WorkerMarkerEntity;
}

//提交按钮，避免多次提交
const btnLoading = ref(false);
//弹出框的参数
const dialogVisible = ref(false);
//当前表单数据在这里初始化
const dialogData = reactive<JobDialogOption>({
  optType: OptEnum.UNKNOW,
  title: "",
  isView: false,
  itemInfo: {
    markerType: 1
  }
});

//数据较验
const rules = reactive({
  name: [{ required: true, message: "请填写名称", trigger: "blur" }]
});

// 接收父组件传过来的参数
const acceptParams = (params: JobDialogOption): void => {
  dialogData.optType = params.optType;
  dialogData.isView = dialogData.optType === OptEnum.VIEW;
  dialogData.title = getOptTitle(dialogData.optType);

  initItemInfo();
  // 必须带参数
  dialogData.itemInfo.id = params.id;

  dialogVisible.value = true;
};

//初始化页面的数据
const initItemInfo = (): void => {
  dialogData.itemInfo = {
    markerType: 1
  };
};

//设置分组
const handleSetMarker = async () => {
  console.log(dialogData.itemInfo);

  if (dialogData.itemInfo.id) {
    //提交数据
    try {
      //提交数据
      let res = await saveWorkerMarkerApi({
        ...dialogData.itemInfo
      });
      if (res.data) {
        ElMessage.success({ message: `标注设置成功` });
        //刷新列表数据
        emits("refresh-mark");
        dialogVisible.value = false;
      }
    } catch (error) {
    } finally {
      btnLoading.value = false;
    }
  } else {
    ElMessage.error("请选择标注");
  }
};

//页面事件
const emits = defineEmits(["refresh-mark"]);

//页面参数
defineExpose({
  acceptParams
});
</script>
